<template>
	<view>
		<view class="head">
			<picker mode="selector" :range="year_arr" :value="this_year" @change="checkYear">
				<text class="title">Years</text>
				<text class="year">{{year_arr[this_year]}}</text>
			</picker>
		</view>
		<view class="calendar-wrapper" :style="{'height': (Math.ceil((day_array.start_week + day_array.num)/7) * 80 + 260)  + 'rpx'}">
			<view class="month-scrollbar">
				<view class="month-wrapper" :style="{'left': (-1 * check_mouth_num * 256) + 'rpx'}">
					<text class="" :class="{'show': item.num == check_mouth_num}" v-for="(item, index) in mouth_arr" :key="index"
					 @click="checkMouth(item.num)">{{item.name}}</text>
				</view>
			</view>
			<view class="day-scrollbar">
				<view class="day-wrapper" :style="{'left': (-1 * check_mouth_num * 697) + 'rpx'}">
					<view class="day-item" v-for="day_list in 12">
						<view class="week-wrapper">
							<text>日</text>
							<text>一</text>
							<text>二</text>
							<text>三</text>
							<text>四</text>
							<text>五</text>
							<text>六</text>
						</view>
						<view class="day-arr">
							<i v-for="week_item in day_array.start_week"></i>
							<text v-for="(day_item, index) in day_array.num" :key="index" :class="[{'yellow': eat_food_arr.indexOf(index + 1) >= 0}, {'grey': rest_arr.indexOf(index + 1) >= 0},{'red': check_day === index + 1}]"
							 @click="checkDay(index + 1)">{{index + 1}}</text>
							<i v-for="end in (7 - ((day_array.start_week + day_array.num) % 7))"></i>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="other-wrapper" v-if="food_arr.length > 0">
			<view class="food-wrapper" v-for="(item, index) in food_arr" :key="index">
				<view class="circle"></view>
				<view class="info">
					<text class="food">本日菜品: {{ item.dish }}</text>
					<text class="time">本日配送时间: {{ item.type }} {{ item.time }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mouth_arr: [{
						num: 0,
						name: 'January'
					},
					{
						num: 1,
						name: 'February'
					},
					{
						num: 2,
						name: 'March'
					},
					{
						num: 3,
						name: 'April'
					},
					{
						num: 4,
						name: 'May'
					},
					{
						num: 5,
						name: 'June'
					},
					{
						num: 6,
						name: 'July'
					},
					{
						num: 7,
						name: 'August'
					},
					{
						num: 8,
						name: 'September'
					},
					{
						num: 9,
						name: 'October'
					},
					{
						num: 10,
						name: 'November'
					},
					{
						num: 11,
						name: 'December'
					}
				],
				year_arr: [],
				this_year: 1,
				check_mouth_num: 0,
				day_array: {
					num: 30, //月份的天数
					start_week: 1 //从周几开始
				},
				is_ajax: false,
				eat_food_arr: [1, 2, 3, 4, 5, 6, 7, 8], //点了餐的日子集合
				rest_arr: [8, 9, 10], //休息的日子集合
				check_day: 1, //用户选择的日子

				food_arr: [], //当日的菜品集合
			};
		},
		mounted() {
			this.initData();
		},
		methods: {
			initData: function() {
				// 获取当前年份
				let date = new Date();
				this.this_year = date.getFullYear();
				this.year_arr = [this.this_year - 1, this.this_year, this.this_year + 1];
				this.this_year = 1;
				this.checkMouth(date.getMonth(), date.getDate());
			},
			checkMouth: function(num, day_num) {
				if (this.is_ajax) {
					return false;
				}
				this.is_ajax = true;

				this.$api.getFoodDayArrayByYM({
						date: this.year_arr[this.this_year] + '-' + ((Number(num) > 9) ? num : '0' + num)
					})
					.then(res => {
						this.is_ajax = false;
						console.log(res);

						// 添加吃饭的日子和休息日的数组
						this.eat_food_arr = [];
						this.rest_arr = [];
						for (let v of res.data.eat) {
							let data = new Data(v.p_time);
							this.eat_food_arr.push(data.getData());
						}
						for (let v of res.data.relax) {
							let data = new Data(v.p_time);
							this.rest_arr.push(data.getData());
						}

						// 获取当月有几天
						let day_array = {};
						let date = new Date();

						//这个月的天数
						date = new Date(this.year_arr[this.this_year], num + 1, 0, 0, 0, 0);
						day_array.num = date.getDate();

						//获取这个星期是从星期几开始
						date = new Date(this.year_arr[this.this_year], num, 1, 0, 0, 0);
						day_array.start_week = date.getDay() == 7 ? 0 : date.getDay();
						this.day_array = day_array;
						// 选择的几月
						this.check_mouth_num = num;
						// 获取当月一号的数据
						if (!!day_num) {
							this.checkDay(day_num);
						} else {
							this.checkDay(1);
						}
					})
			},
			checkYear: function(v) {
				if (this.this_year == v.target.value) {
					return false;
				}
				this.this_year = v.target.value;
				this.checkDay(1);
			},
			checkDay: function(day) {
				this.$api.getFoodByYMB({
						date: new Date(this.year_arr[this.this_year], this.check_mouth_num, day, 0, 0, 0).getTime() / 1000
					})
					.then(res => {
						console.log(res);
						this.check_day = day;
						for (let v of res.data) {
							let hour = Math.floor(v.time / 3600);
							let minute = Math.floor((v.time - (hour * 3600)) / 60);
							v.time = (hour > 9 ? hour : '0' + hour) + ':' + (minute > 9 ? minute : '0' + minute)
						}
						this.food_arr = res.data;
					})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F8;
		width: 100%;
		overflow: hidden;
	}

	.head {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		margin: 0;
		padding: 38rpx 0 0 52rpx;
		background: #DFBB50;
		height: 300rpx;
		overflow: hidden;

		.title {
			position: relative;
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
		}

		.year {
			position: absolute;
			z-index: 2;
			left: 50%;
			bottom: 0;
			margin: 0 0 0 -375rpx;
			color: #FFFFFF;
			font-size: 300rpx;
			font-weight: bold;
			line-height: 300rpx;
			opacity: 0.2;
		}
	}

	.calendar-wrapper {
		position: relative;
		z-index: 2;
		margin-top: -154rpx;
		height: 500rpx;

		.month-scrollbar {
			position: relative;
			height: 100rpx;
			width: 100%;

			.month-wrapper {
				position: absolute;
				left: 0;
				top: 0;
				transition: left .3s;
				width: 3072rpx;
				padding: 20rpx 247rpx 50rpx;
				display: flex;
				align-items: center;
				text-align: center;

				text {
					transition: font-size .3s, color .3s;
					flex: 0 0 256rpx;
					color: #FFFFFF;
					font-size: 28rpx;
					opacity: 0.4;

					&.show {
						font-size: 34rpx;
						opacity: 1;
					}
				}
			}
		}

		.day-scrollbar {
			position: relative;
			width: 100%;

			.day-wrapper {
				position: absolute;
				left: 0;
				top: 0;
				transition: left .3s;
				width: 8160rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				text-align: center;

				.day-item {
					flex: 0 0 680rpx;
					margin: 0 10rpx;
					box-sizing: border-box;
					padding: 52rpx 72rpx;
					width: 660rpx;
					// height: 504rpx;
					background: #FFFFFF;
					border-radius: 20rpx;

					.week-wrapper {
						display: flex;
						align-items: center;
						justify-content: center;

						text {
							flex: 0 0 76rpx;
							font-size: 24rpx;
							color: #DFBB50;
						}
					}

					.day-arr {
						display: flex;
						flex-flow: row wrap;
						align-items: center;
						justify-content: center;

						i {
							flex: 0 0 76rpx;
						}

						text {
							z-index: 100;
							position: relative;
							box-sizing: border-box;
							flex: 0 0 76rpx;
							color: #191919;
							font-size: 24rpx;
							line-height: 80rpx;
							border-radius: 50%;

							&.grey::before {
								z-index: -1;
								content: '';
								position: absolute;
								left: 50%;
								top: 50%;
								margin: -30rpx;
								display: block;
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
								background: #999999;
							}

							&.yellow {
								color: #FFFFFF;
							}

							&.yellow::before {
								z-index: -1;
								content: '';
								position: absolute;
								left: 50%;
								top: 50%;
								margin: -30rpx;
								display: block;
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
								background: #DFBB50;
							}

							&.red::after {
								z-index: -1;
								content: '';
								position: absolute;
								left: 50%;
								top: 50%;
								margin: -22rpx;
								display: block;
								width: 44rpx;
								height: 44rpx;
								border-radius: 50%;
								background: #DD524D;
							}
						}
					}
				}
			}
		}
	}

	.other-wrapper {
		margin: 0 0 100rpx 0;
		overflow: hidden;
		padding: 30rpx 38rpx 0;
		background: #FFFFFF;

		&>view {
			margin-bottom: 30rpx;
			box-sizing: border-box;
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.09);

			.circle {
				margin: 0 52rpx;
				width: 32rpx;
				height: 32rpx;
				border: 1rpx solid #D1AE45;
				border-radius: 50%;
			}

			.info {
				padding-left: 42rpx;
				display: flex;
				flex-flow: column;
				border-left: 1px solid rgba(217, 217, 217, 1);

				&>text:nth-child(1) {
					margin-bottom: 10rpx;
					color: #191919;
					font-size: 24rpx;
				}

				&>text:nth-child(2) {
					color: #191919;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
